<template>
	<view class="wrapper feedback">
		<!--头部-->
		<view class="feedback-header main-flex">
			<view class="service main-flex">
				<image class="service-icon" src="/static/images/icon/service_icon.png"></image>
				<view class="service-right">
					<view class="service-right-top">廷与客服</view>
					<view class="service-right-bottom">提供专业服务</view>
				</view>
			</view>
			<view class="feedback-header-btn" @click="goUrl('/pages/feedback/list')">进度跟踪</view>
		</view>
		<!--内容-->
		<view class="feedback-content">
			<view class="form">
				<uni-forms
					:modelValue="form"
					ref="formRef"
					:label-width="0"
					:rules="rules">
					<uni-forms-item name="advice">
						<uni-easyinput
							type="textarea"
							maxlength="250"
							:inputBorder="false"
							primaryColor="#e3230e"
							v-model="form.advice"
							placeholder="您填写的信息越全面，问题越可有可效结局哦~" />
					</uni-forms-item>
					<uni-forms-item name="adviceImg">
						<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							multiple
							name="adviceImg"
							:maxCount="3"
							></u-upload>
						<uni-easyinput style="display: none;" v-model="form.adviceImg" placeholder="上传营业执照" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<button class="ty-button ty-button-confirm form-submit" :disabled="isSubmit" :loading="isSubmit" @click="submit">提交反馈</button>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { upload } from "@/api/system/common"
import { adviceAdd } from "@/api/app_api/user"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 图片上传
	const fileList = ref([])
	
	// 删除图片
	const deletePic = (event) => {
	  fileList.value.splice(event.index, 1)
		form.value.adviceImg = fileList.value.map(item => item.url).join(',')
	}
	
	// 新增图片
	const afterRead = async (event) => {
	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	  let lists = [].concat(event.file)
	  let fileListLen = fileList.value.length
	  lists.map((item) => {
	    fileList.value.push({
	      ...item,
	      status: 'uploading',
	      message: '上传中',
	    });
	  });
	  for (let i = 0; i < lists.length; i++) {
	    const result = await upload(lists[i].url)
			const data = JSON.parse(result.data)
	    let item = fileList.value[fileListLen]
	    fileList.value.splice(fileListLen, 1, {
	      ...item,
	      status: 'success',
	      message: '',
	      url: data.url,
	    });
	    fileListLen++;
	  }
		form.value.adviceImg = fileList.value.map(item => item.url).join(',')
	};
	
	
	// 表单
	const formRef = ref(null)
	const form = ref({
		advice: '',
		adviceImg: ''
	})
	// 表单验证
	const rules = ref({
		advice: {
			rules: [{
				required: true,
				errorMessage: '请输入建议反馈内容'
			}]
		}
	})
	
	// 表单提交
	const isSubmit = ref(false)
	const submit = () => {
		formRef.value.validate().then(formRes => {
			isSubmit.value = true
			const params = {
				...form.value
			}
			adviceAdd(params).then(res => {
				isSubmit.value = false
				uni.showModal({
					title: '提示',
					showCancel: false,
					confirmText: '我知道了',
					content: '感谢您提交的建议反馈，稍后将给您回复，点击「进度跟踪」可随时查看处理进度',
					success: function (res) {
						if (res.confirm) {
							fileList.value = []
							form.value = {
								advice: '',
								adviceImg: ''
							}
						}
					}
				})
				uni.$u.sleep(1000).then(() => {
					uni.navigateBack({
						delta: 1
					})
				})
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	
	const goUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
	
	onReady(() => {
		formRef.value.setRules(rules.value)
	})
	
</script>

<style lang="scss">
	.feedback {
		&-header {
			padding: 10rpx 20rpx;
			background-color: #fff;
			.service {
				&-icon {
					width: 80rpx;
					height: 80rpx;
				}
				&-right {
					margin-left: 20rpx;
					&-top {
						font-size: 30rpx;
						font-weight: 600;
					}
					&-bottom {
						font-size: 26rpx;
						color: $text-light;
					}
				}
			}
			&-btn {
				font-size: 28rpx;
				color: $text-light;
				margin-left: auto;
			}
		}
		&-content {
			padding: 20rpx;
		}
		.form {
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 10rpx 30rpx;
			.uni-forms .uni-forms-item + .uni-forms-item {
				border: none;
			}
			:deep(.uni-easyinput__content-textarea) {
				height: 350rpx;
			}
			&-submit {
				height: $button-height;
				padding: 0;
				margin: 0;
				margin-top: 40rpx;
				justify-content: center;
			}
		}
	}
</style>
